<div class="container">
    <h1 class="title is-size-1 has-text-centered">Drag Handles</h1>
    <p>Drag handles are specified by the `Handle` property which specifies which CSS class denotes the drag handle. In the example below, the items can only be sorted using the drag handle itself.</p>
    <Tabs CodeContent="@codeContent">
        <ExampleContent>
            <div class="columns">
                <div class="column is-half">
                    <SortableList Id="dragHandles" Handle=".drag-handle" Items="items" OnUpdate="@SortList" Context="item">
                        <SortableItemTemplate>
                            <div class="is-flex is-align-items-center">
                                <div class="has-cursor-grab">
                                    <div class="drag-handle mr-4">
                                        <i class="is-size-4 fas fa-grip-vertical"></i>
                                    </div>
                                </div>
                                <div class="is-flex-grow-1">
                                    <div class=" card has-border-light has-background-blazor has-text-white">
                                        <p class="is-size-4 p-2 ml-4">@item.Name</p>
                                    </div>
                                </div>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </ExampleContent>
    </Tabs>
</div>

@code {

    private string codeContent = @"
    <SortableList Id=""dragHandles"" Handle="".drag-handle"" Items=""items"" OnUpdate=""@SortList"" Context=""item"">
        <SortableItemTemplate>
            <div class=""is-flex is-align-items-center"">
                <div class=""has-cursor-grab"">
                    <div class=""drag-handle mr-4"">
                        <i class=""is-size-4 fas fa-grip-vertical""></i>
                    </div>
                </div>
                <div class=""is-flex-grow-1"">
                    <div class="" card has-border has-background-blazor has-text-white"">
                        <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
                    </div>
                </div>
            </div>
        </SortableItemTemplate>
    </SortableList>

    @code {{
        private void SortList((int oldIndex, int newIndex) indices)
        {{
            // deconstruct the tuple
            var (oldIndex, newIndex) = indices;

            var items = this.items;
            var itemToMove = items[oldIndex];
            items.RemoveAt(oldIndex);

            if (newIndex < items.Count)
            {{
                items.Insert(newIndex, itemToMove);
            }}
            else
            {{
                items.Add(itemToMove);
            }}

            StateHasChanged();
        }}
    }}";

    public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    private void SortList((int oldIndex, int newIndex) indices)
    {
        // deconstruct the tuple
        var (oldIndex, newIndex) = indices;

        var items = this.items;
        var itemToMove = items[oldIndex];
        items.RemoveAt(oldIndex);

        if (newIndex < items.Count)
        {
            items.Insert(newIndex, itemToMove);
        }
        else
        {
            items.Add(itemToMove);
        }

        StateHasChanged();
    }
}
